const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin  = require('html-webpack-plugin')


// 这个配置文件， 起始就是一个JS文件， 通过Node中的模块操作， 向外暴露了一个配置对象
module.exports={
    entry: path.join(__dirname, './src/main.js'),// 入口， 表示使用的webpack打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),
        filename:'bundle.js' // 这是指定 输出的文件的名称
    },
    devServer:{
        //  --open --port 3000 --contentBase src --hot
        open: true, 
        port:3000,
        contentBase:'src',
        hot:true
    }, 

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename:'index.html'
        })
    ],
    module:{
        rules:[
            {test: /\.css$/, use:['style-loader', 'css-loader']},
            {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jepg)$/, use:[
                {
                    loader:'url-loader?limit=8192000&name=[hash:8]-[name].[ext]',
                    options:{
                        esModule: false
                    }
                }
            ]},
            {test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'},
            {test:/\.js$/,use:'babel-loader', exclude:/node_modules/},
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    resolve: {
        alias: {
            //"vue$": "vue/dist/vue.js"
        }
    }
    
}